import React from 'react';
import ReactBootstrap4,{
    Container,
    Input,
    Button,
    CCheckbox,
    Table,
    Pagination,
    Dropdown,
    Select,
    Calendar,
    TextArea,
    Switch,
    Label,
    TabsContent,
    Tabs,
    Box,
	Radio,
	RadioGroup,
	Common,
} from '@clake/react-bootstrap4';
import {
    CTable,
	Window,
	WModal
} from '@clake/react-bootstrap4-window';
import Form from '../../common/Form';
import {GetData, ComboSearch, ProcessData} from '../../common/DataService';
class FWrkItem extends React.Component {
    constructor(props) {
        super(props);
        this.id = 'f_wrk_item';
		this.title = 'Edit Work Item';
        if (!this.props.width) {
            this.width = '796px';
        }
        if (!this.props.height) {
            this.height = '560px';
        }
		this.source = 's_wrk_item';
        this.process = 'f_wrk_item';
		if (this.props.parent instanceof Window) {
            //window 窗体对像
            this.window = this.props.parent;
            //window 管理对像
            this.manage = this.window.parent;
            //传送的窗体参数
            this.params = this.window.params;
        }

		this.state = {
			data:{},
            isEdit:!!this.window?.params?.id
		};
    }

    componentDidMount() {
		this.window.on(Window.EVT_SHOW,this.showHandler);
        this.window.on(Window.EVT_CLOSE,this.closeHandler);
		this.getData(this.window?.params?.id)
    }

    showHandler = ()=>{
        this.getData(this.window?.params?.id)
    };

    closeHandler = ()=>{
        
    };


	getData = (id) => {
		if (!id) {
			return;
		}
        let condition = {
            field:'work_item_id',
            value: id + '',
            flag:  'eq'
        };
        this.modal.loading('Loading...');
        GetData('s_wrk_item',1,1, [condition],null,(res)=>{
            this.modal.close();
            if (res.status) {
                if (res.data.list && res.data.list[0]) {
                    this.setState({
                        data:res.data.list[0],
                        isEdit:true,
                    });
                } else {
                    this.modal.alert('not found data');
                }
            } else {
                this.setState({
                    data:{}
                });
            }
        });
    };

    newData = () => {
        this.window.params = {};
        this.setState({
            data:this.form.getNew(),
            isEdit:false,
        })
    };

    saveData = () => {
        ProcessData(this.process,this.state.isEdit?'edit':'new',this.state.data,(res)=>{
            if (res.status) {
                if (!this.state.isEdit) {
                    this.window.params.id = res.data.new_id;
                }
                this.setState({
                    isEdit:true,
                },()=>{
                    this.modal.alert('save success');
                });
            } else {
                this.modal.alert('save data error:'+res.msg);
            }
        })
    };

    deleteData = ()=>{
        ProcessData(this.process,'delete',{'work_item_id':this.window.params.id},(res)=>{
            if (res.status) {
                this.modal.alert({
                    content: 'delete success',
                    callback: ()=>{
                        this.window.close();
                    }
                });
            } else {
                this.modal.alert('save data error:'+res.msg);
            }
        })
    };

    fieldChangeHandler = (field,val,row,type,textField)=>{
        let data = this.state.data;
        if (type==='combo') {
            data[field] = row?row[field]??row[textField]:'';
			data[textField] = val;
        } else {
            data[field] = val;
        }
        this.setState({data:data});
    };
	
	sortHandler() {}

	filterHandler() {}

	open() {}

    render() {
        return (
            <Form ref={c=>this.form=c} onChange={this.fieldChangeHandler}>
                <Input jsxId={'eft_project_id'} field={'work_id'} absolute={true} size={'xs'} x={'108px'} y={'44px'} width={'52px'} tabIndex={'0'} align={'left'} disabled={true} data={this.state.data?.work_id}/>
                <Label jsxId={'Label719'} sm={true} absolute={true} x={'36px'} y={'44px'} width={'64px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Work ID'}/>
                <Box jsxId={'box_00_11'} absolute={true} x={'20px'} y={'112px'} width={'364px'} height={'152px'} borderColor={'rgb(128,128,128)'} borderWidth={'1px'}/>
                <Input jsxId={'item_desc'} field={'item_desc'} absolute={true} size={'xs'} x={'584px'} y={'148px'} width={'168px'} tabIndex={'1'} align={'left'} data={this.state.data?.item_desc}/>
                <Input jsxId={'created_by_code'} field={'created_by_code'} absolute={true} size={'xs'} x={'532px'} y={'280px'} width={'96px'} tabIndex={'2'} align={'left'} disabled={true} data={this.state.data?.created_by_code}/>
                <Label jsxId={'Label833'} sm={true} absolute={true} x={'400px'} y={'280px'} width={'124px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Created By - Date'}/>
                <Input jsxId={'created_date'} field={'created_date'} absolute={true} size={'xs'} x={'640px'} y={'280px'} width={'112px'} tabIndex={'3'} align={'left'} disabled={true} calendar={{format:'YYYY-MM-DD'}} data={this.state.data?.created_date}/>
                <Input jsxId={'modified_by_code'} field={'modified_by_code'} absolute={true} size={'xs'} x={'532px'} y={'312px'} width={'96px'} tabIndex={'4'} align={'left'} disabled={true} data={this.state.data?.modified_by_code}/>
                <Label jsxId={'Label834'} sm={true} absolute={true} x={'400px'} y={'312px'} width={'124px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Modified By - Date'}/>
                <Input jsxId={'modified_date'} field={'modified_date'} absolute={true} size={'xs'} x={'640px'} y={'312px'} width={'112px'} tabIndex={'5'} align={'left'} disabled={true} calendar={{format:'YYYY-MM-DD'}} data={this.state.data?.modified_date}/>
                <Box jsxId={'Box776'} absolute={true} x={'384px'} y={'112px'} width={'388px'} height={'152px'} borderColor={'rgb(128,128,128)'} borderWidth={'1px'}/>
                <TextArea jsxId={'item_attachment'} field={'item_attachment'} absolute={true} size={'xs'} x={'384px'} y={'372px'} width={'388px'} tabIndex={'6'} height={'168px'} data={this.state.data?.item_attachment}/>
                <Label jsxId={'Label706'} sm={true} absolute={true} x={'384px'} y={'352px'} width={'332px'} height={'20px'} align={'center'} color={'rgb(255,255,255)'} backColor={'rgb(128,128,128)'} text={'Item Attachment'}/>
                <Input jsxId={'efc_group_code'} field={'efc_group_code'} absolute={true} size={'xs'} x={'220px'} y={'280px'} width={'80px'} tabIndex={'8'} align={'left'} disabled={true} data={this.state.data?.efc_group_code}/>
                <Input jsxId={'branch_code'} field={'branch_code'} absolute={true} size={'xs'} x={'308px'} y={'280px'} width={'56px'} tabIndex={'9'} align={'center'} disabled={true} data={this.state.data?.branch_code}/>
                <Button jsxId={'btn1PostItem'} absolute={true} size={'xs'} x={'684px'} y={'44px'} width={'52px'} height={'40px'} outline={true} theme={'danger'}>
                    Post Item
                </Button>
                <Button jsxId={'btn1UndoPost'} absolute={true} size={'xs'} x={'632px'} y={'44px'} width={'52px'} height={'40px'} outline={true} theme={'info'}>
                    Undo <br/>Post
                </Button>
                <Box jsxId={'Boxheadline'} absolute={true} x={'0px'} y={'0px'} width={'652px'} height={'28px'} backColor={'rgb(53,88,117)'} borderColor={'rgb(0,0,0)'} borderWidth={'1px'}/>
                <Input jsxId={'item_seq_no'} field={'item_seq_no'} absolute={true} size={'xs'} x={'236px'} y={'44px'} width={'52px'} tabIndex={'12'} align={'center'} data={this.state.data?.item_seq_no}/>
                <Label jsxId={'lbl_efc_branch_id'} sm={true} absolute={true} x={'176px'} y={'44px'} width={'52px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Seq No.'}/>
                <Button jsxId={'btn0Add'} onClick={this.newData} absolute={true} size={'xs'} x={'736px'} y={'0px'} width={'28px'} height={'24px'} outline={true} icon={'folder-plus'} theme={'dark'}>
                    
                </Button>
                <Button jsxId={'btn0Delete'} onClick={this.deleteData} absolute={true} size={'xs'} x={'708px'} y={'0px'} width={'28px'} height={'24px'} outline={true} icon={'times-circle'} theme={'danger'}>
                    
                </Button>
                <Button jsxId={'btn0Clone'} absolute={true} size={'xs'} x={'680px'} y={'0px'} width={'28px'} height={'24px'} outline={true} icon={'clone'} theme={'dark'}>
                    
                </Button>
                <Button jsxId={'btn0Reload'} onClick={this.showHandler} absolute={true} size={'xs'} x={'652px'} y={'0px'} width={'28px'} height={'24px'} outline={true} icon={'sync-alt'} theme={'success'}>
                    
                </Button>
                {this.state.isEdit?<Button onClick={this.saveData} jsxId={'btn0Edit'} absolute={true} size={'xs'} x={'764px'} y={'0px'} width={'28px'} height={'24px'} outline={true} icon={'edit'} theme={'success'}>
                </Button>:
                <Button jsxId={'btn0Save'} onClick={this.saveData} absolute={true} size={'xs'} x={'764px'} y={'0px'} width={'28px'} height={'24px'} outline={true} icon={'save'} theme={'success'}>
                </Button>}
                <Box jsxId={'BoxhearlineButton'} absolute={true} x={'652px'} y={'0px'} width={'140px'} height={'28px'} borderColor={'rgb(128,128,128)'} borderWidth={'1px'}/>
                <Label jsxId={'status_desc'} sm={true} absolute={true} x={'220px'} y={'4px'} width={'96px'} height={'20px'} align={'left'} color={'rgb(255,255,255)'} field={'status_desc'} text={this.state.data?.status_desc}/>
                <Label jsxId={'Label810'} sm={true} absolute={true} x={'164px'} y={'4px'} width={'52px'} height={'20px'} align={'left'} color={'rgb(255,255,255)'} text={'Status'}/>
                <Button jsxId={'btn1Upload'} absolute={true} size={'xs'} x={'716px'} y={'352px'} width={'28px'} height={'20px'} outline={true} icon={'upload'} theme={'success'}>
                    
                </Button>
                <Button jsxId={'btn0Expand'} absolute={true} size={'xs'} x={'744px'} y={'352px'} width={'28px'} height={'20px'} outline={true} icon={'expand-arrows-alt'} theme={'dark'}>
                    
                </Button>
                <Box jsxId={'Box824'} absolute={true} x={'20px'} y={'264px'} width={'364px'} height={'88px'} borderColor={'rgb(128,128,128)'} borderWidth={'1px'}/>
                <Input jsxId={'item_work_code'} field={{key:'item_work_code',text_key:'item_work_code'}} size={'xs'} absolute={true} x={'496px'} y={'128px'} width={'68px'} align={'left'} combo={{
                    onSearch:ComboSearch('item_work_code','q_wrk_tb_work_code'),
                    searchColumn:'item_work_code',
                    width:'192px',
                    header:false,
                    filterColumns:[
                        {field:'item_work_code',width:'48px'},
                        {field:'item_work_desc',width:'144px'}
                    ]
                }} data={this.state.data?.item_work_code}/>
                <Label jsxId={'Label170'} sm={true} absolute={true} x={'400px'} y={'128px'} width={'88px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Work Code'}/>
                <Input jsxId={'item_size_code'} field={{key:'item_size_code',text_key:'work_size_code'}} size={'xs'} absolute={true} x={'496px'} y={'160px'} width={'68px'} align={'left'} combo={{
                    onSearch:ComboSearch('work_size_code','q_wrk_tb_size_code'),
                    searchColumn:'work_size_code',
                    width:'85px',
                    header:false,
                    filterColumns:[
                        {field:'work_size_code',width:'28px'},
                        {field:'work_size_desc',width:'57px'}
                    ]
                }} data={this.state.data?.work_size_code}/>
                <Label jsxId={'Label835'} sm={true} absolute={true} x={'400px'} y={'160px'} width={'88px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Item Size'}/>
                <Input jsxId={'code_start_date'} field={'code_start_date'} absolute={true} size={'xs'} x={'168px'} y={'160px'} width={'92px'} tabIndex={'24'} align={'left'} calendar={{format:'YYYY-MM-DD'}} data={this.state.data?.code_start_date?moment(this.state.data?.code_start_date).format('YYYY-MM-DD'):''}/>
                <Label jsxId={'Label739'} sm={true} absolute={true} x={'36px'} y={'160px'} width={'124px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Code Start - Finish'}/>
                <Input jsxId={'code_finish_date'} field={'code_finish_date'} absolute={true} size={'xs'} x={'268px'} y={'160px'} width={'96px'} tabIndex={'25'} align={'left'} calendar={{format:'YYYY-MM-DD'}} data={this.state.data?.code_finish_date?moment(this.state.data?.code_finish_date).format('YYYY-MM-DD'):''}/>
                <Input jsxId={'test_complete_date'} field={'test_complete_date'} absolute={true} size={'xs'} x={'268px'} y={'192px'} width={'96px'} tabIndex={'27'} align={'left'} calendar={{format:'YYYY-MM-DD'}} data={this.state.data?.test_complete_date?moment(this.state.data?.test_complete_date).format('YYYY-MM-DD'):''}/>
                <Input jsxId={'urs_id'} field={'urs_id'} absolute={true} size={'xs'} x={'136px'} y={'280px'} width={'76px'} tabIndex={'28'} align={'left'} disabled={true} data={this.state.data?.urs_id}/>
                <Label jsxId={'Label796'} sm={true} absolute={true} x={'36px'} y={'280px'} width={'92px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'URS ID -  By'}/>
                <Input jsxId={'estimated_hours'} field={'estimated_hours'} absolute={true} size={'xs'} x={'496px'} y={'192px'} width={'68px'} tabIndex={'29'} align={'center'} data={this.state.data?.estimated_hours}/>
                <Label jsxId={'Label831'} sm={true} absolute={true} x={'400px'} y={'192px'} width={'88px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Estimated H'}/>
                <Input jsxId={'actual_hours'} field={'actual_hours'} absolute={true} size={'xs'} x={'496px'} y={'224px'} width={'68px'} tabIndex={'30'} align={'center'} data={this.state.data?.actual_hours}/>
                <Label jsxId={'Label846'} sm={true} absolute={true} x={'400px'} y={'224px'} width={'88px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Actual Hours'}/>
                <Label jsxId={'work_item_id'} sm={true} absolute={true} x={'80px'} y={'4px'} width={'56px'} height={'20px'} align={'left'} color={'rgb(255,255,255)'} field={'work_item_id'} text={this.state.data?.work_item_id}/>
                <Label jsxId={'Label837'} sm={true} absolute={true} x={'16px'} y={'4px'} width={'56px'} height={'20px'} align={'left'} color={'rgb(255,255,255)'} text={'Item ID'}/>
                <Input jsxId={'project_subject'} field={'work_subject'} absolute={true} size={'xs'} x={'108px'} y={'76px'} width={'288px'} tabIndex={'32'} align={'left'} data={this.state.data?.work_subject}/>
                <Label jsxId={'Label741'} sm={true} absolute={true} x={'36px'} y={'76px'} width={'64px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Subject'}/>
                <Input jsxId={'Text838'} field={'test_complete_date'} absolute={true} size={'xs'} x={'168px'} y={'224px'} width={'92px'} tabIndex={'33'} align={'left'} disabled={true} calendar={{format:'YYYY-MM-DD'}} data={this.state.data?.test_complete_date}/>
                <Label jsxId={'Label778'} sm={true} absolute={true} x={'36px'} y={'224px'} width={'124px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Close Date'}/>
                <Input jsxId={'efc_release_id'} field={'efc_release_id'} absolute={true} size={'xs'} x={'268px'} y={'224px'} width={'96px'} tabIndex={'34'} align={'center'} disabled={true} data={this.state.data?.efc_release_id}/>
                <Input jsxId={'product_code'} field={'product_code'} absolute={true} size={'xs'} x={'168px'} y={'128px'} width={'92px'} tabIndex={'35'} align={'left'} disabled={true} data={this.state.data?.product_code}/>
                <Label jsxId={'Label743'} sm={true} absolute={true} x={'36px'} y={'128px'} width={'124px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Product - Coder'}/>
                <Label jsxId={'Label840'} sm={true} absolute={true} x={'584px'} y={'128px'} width={'168px'} height={'20px'} align={'center'} color={'rgb(255,255,255)'} backColor={'rgb(128,128,128)'} text={'Item Desc'}/>
                <Input jsxId={'urs_subject'} field={'urs_subject'} absolute={true} size={'xs'} x={'136px'} y={'312px'} width={'228px'} tabIndex={'36'} align={'left'} disabled={true} data={this.state.data?.urs_subject}/>
                <Label jsxId={'Label841'} sm={true} absolute={true} x={'36px'} y={'312px'} width={'92px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'URS Subject'}/>
                <Box jsxId={'Box843'} absolute={true} x={'384px'} y={'264px'} width={'388px'} height={'88px'} borderColor={'rgb(128,128,128)'} borderWidth={'1px'}/>
                <TextArea jsxId={'urs_attachment'} field={'urs_attachment'} absolute={true} size={'xs'} x={'20px'} y={'372px'} width={'364px'} tabIndex={'37'} height={'168px'} data={this.state.data?.urs_attachment}/>
                <Label jsxId={'Label845'} sm={true} absolute={true} x={'20px'} y={'352px'} width={'364px'} height={'20px'} align={'center'} color={'rgb(255,255,255)'} backColor={'rgb(128,128,128)'} text={'URS Log Attachment'}/>
                <Input jsxId={'assign_to_code'} field={{key:'coder',text_key:'user_code'}} size={'xs'} absolute={true} x={'268px'} y={'128px'} width={'96px'} align={'left'} combo={{
                    onSearch:ComboSearch('user_code','q_eft_user'),
                    searchColumn:'user_code',
                    width:'153px',
                    header:false,
                    filterColumns:[
                        {field:'user_code',width:'57px'},
                        {field:'user_name',width:'96px'}
                    ]
                }} data={this.state.data?.assign_to_code}/>
                <Input jsxId={'test_by_code'} field={{key:'test_by_code',text_key:'user_code'}} size={'xs'} absolute={true} x={'168px'} y={'192px'} width={'92px'} align={'left'} combo={{
                    onSearch:ComboSearch('user_code','q_eft_user'),
                    searchColumn:'user_code',
                    width:'153px',
                    header:false,
                    filterColumns:[
                        {field:'user_code',width:'57px'},
                        {field:'user_name',width:'96px'}
                    ]
                }} data={this.state.data?.user_code}/>
                <Label jsxId={'Label827'} sm={true} absolute={true} x={'36px'} y={'192px'} width={'124px'} height={'20px'} align={'left'} color={'rgb(0,0,0)'} text={'Test by - Complete'}/>
				<WModal ref={c=>this.modal=c}/>
            </Form>
        );
    }
}

export default FWrkItem;
